<template>
  <div>
    <div class='mt20'>
      <!-- <el-alert
        title="设置促销价格，请以'分'为单位"
        show-icon
        style="width: 1200px;"
        type="info">
      </el-alert> -->
      <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition mt20" style="width: 1200px;">
        <div class="el-table__header-wrapper">
         <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 1199px;">
            <colgroup>
              <col v-for='(item,$index) in columnWidth' :name="'el-table_1_column_'+($index+1)" :width="item">
              <col name="gutter" width="">
            </colgroup>
            <thead>
              <tr>
                <th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
                  <div class="cell">商品名称</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
                  <div class="cell">商品分类</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
                  <div class="cell">成本价(元)</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_4 is-leaf">
                  <div class="cell">发货成本(元)</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_5 is-leaf">
                  <div class="cell">常售价(元)</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_6 is-leaf">
                  <div class="cell">促销价(元)</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_7 is-leaf">
                  <div class="cell">促销折扣(%)</div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_1_column_8 is-leaf">
                  <div class="cell">操作</div>
                </th>
                <th class="gutter" style="width: 0px;"></th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="el-table__body-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 1199px;">
            <colgroup>
              <col v-for='(item,$index) in columnWidth' :name="'el-table_1_column_'+($index+1)" :width="item">
            </colgroup>
            <tbody>
              <tr class="" v-for='(item,$index) in tableData' :key='item.skuId'>
                <!-- 商品名称 -->
                <td class="el-table_1_column_1">
                  <div class="cell">{{item.productTitle}}</div>
                </td>
                <!-- 属性名称 -->
                <td class="el-table_1_column_2">
                  <div class="cell">{{item.property}}</div>
                </td>
                <!-- 成本价 -->
                <td class="el-table_1_column_3">
                  <div class="cell">{{item.costPrice | price}}</div>
                </td>
                <!-- 发货成本 -->
                <td class="el-table_1_column_4">
                  <div class="cell">{{item.costExpress | price}}</div>
                </td>
                <!-- 常售价 -->
                <td class="el-table_1_column_5">
                  <div class="cell">{{item.regularPrice | price}}</div>
                </td>
                <!-- 促销价 -->
                <td class="el-table_1_column_6">
                  <div class="cell">
                    ¥<el-input v-model="item.promotionPrice" @change='updataPromotionPricePriceDiscount(item.promotionPrice, $index)' style='width:80px'></el-input>
                    <!-- <span v-if='item.promotionPrice'>¥{{item.promotionPrice.toFix(2)}}</span> -->
                  </div>
                </td>
                <!-- 促销价折扣显示 -->
                <td class="el-table_1_column_7">
                  <div class="cell">
                    <el-input v-model="item.promotionPriceDiscount" @change='updataPromotionPrice(item.promotionPriceDiscount, $index)' style='width:80px'></el-input>
                    <!-- <span v-if='item.promotionPriceDiscount'>{{item.promotionPriceDiscount}}%</span> -->
                  </div>
                </td>
                <td class="el-table_1_column_8">
                  <div class="cell">
                    <el-button type="text" @click='del($index)'>删除</el-button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getSkuListByProductList
  } from 'src/api/index.js'
  export default {
    props: ['productList', 'skuTableList', 'skuList'],
    data () {
      return {
        // 设置列宽
        editFlag: 0,
        columnWidth: [153, 177, 127, 127, 127, 187, 187, 100],
        tableData: [
        ]
      }
    },
    watch: {
      skuTableList: {
        deep: true,
        handler: function (val, oldVal) {
          if (this.skuTableList.length > 0) {
            // this.tableData = this.skuTableList
            this.$nextTick(() => {
              this.delBySkuId()
              this.computedDiscount()
            })
          }
        }
      },
      productList: {
        deep: true,
        handler: function (val, oldVal) {
          this.fetchSkuListData()
        }
      }
    },
    methods: {
      fetchSkuListData () {
        if (this.productList.length !== 0) {
          // this.tableData = []
          getSkuListByProductList({
            'page': 1,
            'productIdList': this.productList,
            'size': 1000
          }).then((res) => {
            let result = res.data
            if (result.code === 100) {
              let skuList = result.data.list
              skuList.forEach((item) => {
                let rowItem = {
                  productTitle: item.productTitle,
                  property: item.property,
                  costPrice: item.costPrice,
                  costExpress: item.costExpress,
                  regularPrice: item.regularPrice,
                  skuId: item.skuId,
                  productId: item.productId,
                  promotionPrice: '',
                  promotionPriceDiscount: ''
                }
                // 检查tableData是否包含有相同的skuid
                let result = this.tableData.find((skuItem) => {
                  return skuItem.skuId === item.skuId
                })
                if (!result) {
                  this.tableData.push(rowItem)
                }
              })
            }
          })
        } else {
          this.tableData = []
        }
      },
      updataPromotionPrice (discount, index) {
        let regularPrice = this.tableData[index].regularPrice
        let point = discount / 100
        let promotionPrice = regularPrice * point
        this.tableData[index].promotionPrice = (promotionPrice / 100).toFixed(2)
      },
      updataPromotionPricePriceDiscount (promotionPrice, index) {
        let regularPrice = this.tableData[index].regularPrice
        let discount = (parseInt(promotionPrice * 100, 10) / regularPrice) * 100
        this.tableData[index].promotionPriceDiscount = discount.toFixed(2)
      },
      del (index) {
        this.tableData.splice(index, 1)
      },
      delBySkuId () {
        this.tableData = this.skuTableList.filter((item, index) => {
          return this.skuList.indexOf(item.skuId) > -1
        })
        this.tableData = this.tableData.map((item) => {
          let skuItem = {...item}
          skuItem['promotionPrice'] = item['promotionPrice'] / 100
          return skuItem
        })
      },
      computedDiscount () {
        this.tableData.forEach((item, index) => {
          if (item.promotionPrice) {
            let discount = parseInt(item.promotionPrice * 100, 10) / item.regularPrice * 100
            this.tableData[index].promotionPriceDiscount = discount.toFixed(2)
          }
        })
      },
      getTableData () {
        let result = []
        this.tableData.forEach((item) => {
          let arrItem = {...item}
          arrItem['promotionPrice'] = Number(item['promotionPrice']) * 100
          result.push(arrItem)
        })
        return result
      }
    }
  }
</script>
